// default
$table-row-handle-btn-default-bgcolor: #fff;
$table-row-handle-btn-default-color: #323a45;
// primary
$table-row-handle-btn-primary-bgcolor: #e8f4ff;
$table-row-handle-btn-primary-color: #1890ff;
// success
$table-row-handle-btn-success-bgcolor: #e7f9f6;
$table-row-handle-btn-success-color: #13c1a3;
// info
$table-row-handle-btn-info-bgcolor: #fafbfc;
$table-row-handle-btn-info-color: #a9b3be;
// warning
$table-row-handle-btn-warning-bgcolor: #fff2e6;
$table-row-handle-btn-warning-color: #ff8000;
// danger
$table-row-handle-btn-danger-bgcolor: #feeeee;
$table-row-handle-btn-danger-color: #f45454;

// reset el-image-viewer图片预览最顶层
.el-image-viewer__wrapper {
  z-index: 3000 !important;
}

// reset element弹窗
.sys-modal {
  // min-width: 980px;
  border-radius: 0 0 4px 4px !important;

  .el-dialog__header {
    min-height: 24px;
    border-top: 6px solid #3181f2 !important;
    border-bottom: 1px solid #c8d2de !important;
    background: #fff;
    padding: 10px 20px 10px;

    // 弹窗头字体颜色
    .el-dialog__title {
      font-size: 14px;
      color: #02183a !important;
      font-weight: 600 !important;
    }

    // 关闭按钮
    .el-dialog__close {
      font-size: 14px;
      color: #c4c4c4 !important;
      font-weight: 600 !important;
      transition: all 0.2s ease-out;

      &:hover {
        transform: scale(1.5);
      }
    }
  }

  .el-dialog__body {
    max-height: 600px !important;
    overflow-y: auto !important;
  }
  &.minh {
    .el-dialog__body {
      min-height: 500px !important;
    }
  }

  .el-form-item__content {
    & > .el-input,
    & > .el-select,
    & > .el-cascader,
    & > div:not(.el-checkbox-group) {
      width: 220px;
    }

    & > div {
      word-break: break-all;
    }
  }

  .el-dialog__footer {
    background: #f5f5f5;
    padding: 10px 20px 10px;
    border-radius: 0 0 4px 4px !important;
  }
}

// 系统统一按钮
.el-button.sys-btn {
  // color: #fff;
  min-width: 78px;
  height: 28px;
}

// 一般操作按钮
.el-button.sys-primary-btn {
  //background-color: #4e7bf5;
  //border-color: #4e7bf5;
  //@extend .sys-btn;
  //&:active {
  //  background: #466fdd;
  //  border-color: #466fdd;
  //  outline: none;
  //}
  //
  //&:focus,
  //&:hover {
  //  background: #7195f7;
  //  border-color: #7195f7;
  //}
  //
  //&.is-active {
  //  background: #466fdd;
  //  border-color: #466fdd;
  //}
  //
  //&.is-disabled,
  //&.is-disabled:hover,
  //&.is-disabled:focus,
  //&.is-disabled:active {
  //  background-color: #a7bdfa;
  //  border-color: #a7bdfa;
  //}
  //
  //&.is-plain {
  //  color: #4e7bf5;
  //  background: #edf2fe;
  //  border-color: #b8cafb;
  //}
  //
  //&.is-plain:hover,
  //&.is-plain:focus {
  //  background: #4e7bf5;
  //  border-color: #4e7bf5;
  //}
  //
  //&.is-plain:active {
  //  background: #466fdd;
  //  border-color: #466fdd;
  //  outline: none;
  //}

  //&.is-plain.is-disabled,
  //&.is-plain.is-disabled:hover,
  //&.is-plain.is-disabled:focus,
  //&.is-plain.is-disabled:active {
  //  color: #95b0f9;
  //  background-color: #edf2fe;
  //  border-color: #dce5fd;
  //}
}

// 危险按钮
.el-button.sys-danger-btn {
  background-color: #ff4e4e;
  border-color: #ff4e4e;
  @extend .sys-btn;

  &:active {
    background: #e64646;
    border-color: #e64646;

    outline: none;
  }

  &:focus,
  &:hover {
    background: #ff7171;
    border-color: #ff7171;
  }

  &.is-active {
    background: #e64646;
    border-color: #e64646;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &.is-disabled:active {
    background-color: #ffa7a7;
    border-color: #ffa7a7;
  }

  &.is-plain {
    color: #ff4e4e;
    background: #ffeded;
    border-color: #ffb8b8;
  }

  &.is-plain:hover,
  &.is-plain:focus {
    background: #ff4e4e;
    border-color: #ff4e4e;
  }

  &.is-plain:active {
    background: #e64646;
    border-color: #e64646;

    outline: none;
  }

  &.is-plain.is-disabled,
  &.is-plain.is-disabled:hover,
  &.is-plain.is-disabled:focus,
  &.is-plain.is-disabled:active {
    color: #ff9595;
    background-color: #ffeded;
    border-color: #ffdcdc;
  }
}

// 成功按钮
.el-button.sys-success-btn {
  background-color: #13c1a3;
  border-color: #13c1a3;
  @extend .sys-btn;

  &:active {
    background: #11ae93;
    border-color: #11ae93;

    outline: none;
  }

  &:focus,
  &:hover {
    background: #42cdb5;
    border-color: #42cdb5;
  }

  &.is-active {
    background: #11ae93;
    border-color: #11ae93;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &.is-disabled:active {
    background-color: #89e0d1;
    border-color: #89e0d1;
  }

  &.is-plain {
    color: #13c1a3;
    background: #e7f9f6;
    border-color: #a1e6da;
  }

  &.is-plain:hover,
  &.is-plain:focus {
    background: #13c1a3;
    border-color: #13c1a3;
  }

  &.is-plain:active {
    background: #11ae93;
    border-color: #11ae93;

    outline: none;
  }

  &.is-plain.is-disabled,
  &.is-plain.is-disabled:hover,
  &.is-plain.is-disabled:focus,
  &.is-plain.is-disabled:active {
    color: #71dac8;
    background-color: #e7f9f6;
    border-color: #d0f3ed;
  }
}

// 信息按钮
.el-button.sys-info-btn {
  background-color: #707070;
  border-color: #707070;
  @extend .sys-btn;

  &:active {
    background: #656565;
    border-color: #656565;

    outline: none;
  }

  &:focus,
  &:hover {
    background: #8d8d8d;
    border-color: #8d8d8d;
  }

  &.is-active {
    background: #656565;
    border-color: #656565;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &.is-disabled:active {
    background-color: #b8b8b8;
    border-color: #b8b8b8;
  }

  &.is-plain {
    color: #707070;
    background: #f1f1f1;
    border-color: #c6c6c6;
  }

  &.is-plain:hover,
  &.is-plain:focus {
    background: #707070;
    border-color: #707070;
  }

  &.is-plain:active {
    background: #656565;
    border-color: #656565;

    outline: none;
  }

  &.is-plain.is-disabled,
  &.is-plain.is-disabled:hover,
  &.is-plain.is-disabled:focus,
  &.is-plain.is-disabled:active {
    color: darkgray;
    background-color: #f1f1f1;
    border-color: #e2e2e2;
  }
}

// 警告按钮
.el-button.sys-warning-btn {
  background-color: #ff8000;
  border-color: #ff8000;
  @extend .sys-btn;

  &:active {
    background: #e67300;
    border-color: #e67300;

    outline: none;
  }

  &:focus,
  &:hover {
    background: #ff9933;
    border-color: #ff9933;
  }

  &.is-active {
    background: #e67300;
    border-color: #e67300;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &.is-disabled:active {
    background-color: #ffc080;
    border-color: #ffc080;
  }

  &.is-plain {
    color: #ff8000;
    background: #fff2e6;
    border-color: #ffcc99;
  }

  &.is-plain:hover,
  &.is-plain:focus {
    background: #ff8000;
    border-color: #ff8000;
  }

  &.is-plain:active {
    background: #e67300;
    border-color: #e67300;

    outline: none;
  }

  &.is-plain.is-disabled,
  &.is-plain.is-disabled:hover,
  &.is-plain.is-disabled:focus,
  &.is-plain.is-disabled:active {
    color: #ffb366;
    background-color: #fff2e6;
    border-color: #ffe6cc;
  }
}

// 表格操作按钮
.table-row-handle-btn {
  font-size: 12px;
  padding: 4px 8px !important;
  display: inline-block;
}

// 表格内操作行按钮
.table-row-handle-default-btn {
  @extend .table-row-handle-btn;
  background-color: $table-row-handle-btn-default-bgcolor !important;
  border-color: $table-row-handle-btn-default-color !important;
  color: $table-row-handle-btn-default-color !important;
}

.table-row-handle-primary-btn {
  @extend .table-row-handle-btn;
  background-color: $table-row-handle-btn-primary-bgcolor !important;
  border-color: $table-row-handle-btn-primary-color !important;
  color: $table-row-handle-btn-primary-color !important;
}

.table-row-handle-success-btn {
  @extend .table-row-handle-btn;
  background-color: $table-row-handle-btn-success-bgcolor !important;
  border-color: $table-row-handle-btn-success-color !important;
  color: $table-row-handle-btn-success-color !important;
}

.table-row-handle-info-btn {
  @extend .table-row-handle-btn;
  background-color: $table-row-handle-btn-info-bgcolor !important;
  border-color: $table-row-handle-btn-info-color !important;
  color: $table-row-handle-btn-info-color !important;
}

.table-row-handle-warning-btn {
  @extend .table-row-handle-btn;
  background-color: $table-row-handle-btn-warning-bgcolor !important;
  border-color: $table-row-handle-btn-warning-color !important;
  color: $table-row-handle-btn-warning-color !important;
}

.table-row-handle-danger-btn {
  @extend .table-row-handle-btn;
  background-color: $table-row-handle-btn-danger-bgcolor !important;
  border-color: $table-row-handle-btn-danger-color !important;
  color: $table-row-handle-btn-danger-color !important;
}
